<template>
  <div class="container">
    <Header v-bind:isBack="isBack" v-bind:title="title"></Header>
    <!-- 头部信息部分 -->
    <div class="top-card">
      <div class="items">
        <div class="left">
          <div class="img">
            <img
              :src="topData.song_sheet_photo || topData.music_list_photo || topData.list_category_photo || topData.background"
              alt
            />
          </div>
        </div>
        <div class="right">
          <div
            class="top fs-32"
          >{{topData.song_sheet_name || topData.music_list_content || topData.list_category_name || topData.music_name}}</div>
          <div class="bottom fs-22" v-show="status == 2">{{topData.singer_artistic_name}}</div>
          <div class="bottom fs-22" v-show="status == 1">{{topData.song_sheet_content}}</div>
          <div class="bottom fs-22" v-show="status == 3">最近更新时间:{{topData.music_update_time}}</div>
          <div class="bottom fs-22" v-show="status == 5">{{topData.singer_name}}</div>
        </div>
      </div>
    </div>

    <!-- 精彩评论部分 -->
    <div class="comment">
      <div class="comment-title fs-28">精彩评论</div>
      <div class="comment-list" v-if="commentList && commentList.length">
        <div
          class="items"
          v-for="(item,index) in commentList"
          :key="index"
          @click="showReplyModel(item)"
        >
          <div class="left">
            <img :src="item.user_avator" alt />
          </div>
          <div class="right">
            <div class="top">
              <div class="t-left">
                <div class="user-name fs-26">{{item.nickname}}</div>
                <div class="timer">{{item.add_time}}</div>
              </div>
              <div class="t-right">
                <div class="num fs-24">{{item.good_num}}</div>
                <div
                  class="praise"
                  @click.stop="support(item.song_sheet_comments_id,item.list_comments_id,item.music_list_comments_id,item.music_comments_id)"
                >
                  <img :src="praised" v-if="item.is_click == 1 || item.is_thumbsUp" alt />
                  <img :src="praise" alt v-else />
                </div>
              </div>
            </div>
            <div
              class="centers fs-32"
            >{{item.comments_content || item.comments_contents || item.comments_words}}</div>
            <div
              class="bottom fs-24"
              v-show="item.reply_num"
              @click.stop="toCommentReply(item.song_sheet_comments_id,item.list_comments_id,item.music_list_comments_id,item.music_comments_id)"
            >{{item.reply_num}}条回复</div>
          </div>
        </div>
      </div>
      <div class="mes" v-else>还没有评论数据奥</div>
    </div>

    <!-- 发表评论部分 -->
    <div class="send-comment" v-if="isPublish">
      <input type="text" name id placeholder="请填写评论内容..." v-model="desc" />
      <div class="send-btn fs-28" @click="sendComment">发送</div>
    </div>

    <!-- 回复评论部分 -->
    <div class="send-comment" id="replayBox" v-else>
      <input
        type="text"
        name
        :placeholder="replyContent"
        @blur="stopReply"
        v-model="descReply"
        v-focus="picFocusStatus"
      />
      <div class="send-btn fs-28" @click="sendReplyComment">发送</div>
    </div>
    <!-- 回复评论模态框 -->
    <div class="comment-model" @touchmove.prevent v-show="isShowReply" @click="closeModel">
      <div class="content" @click.stop="replyComment">
        <div class="reply-comment fs-28">回复评论</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "comment",
  data() {
    return {
      title: "评论",
      isBack: true,
      desc: "", //评论数据
      praise: require("@/assets/index/praise.png"),
      headerPic: require("@/assets/image/cove.png"),
      praised: require("@/assets/index/support-mine.png"),
      commentList: [
        {
          id: 1,
          userName: "呆萌小龟",
          time: "5小时以前",
          num: 0,
          content:
            "麦尔鼓手节8小接Solo简介，麦尔鼓手节8小Solo简介，麦尔鼓手节80小接Solo麦…",
          praiseNum: 4
        },
        {
          id: 2,
          userName: "呆萌小龟",
          time: "5小时以前",
          num: 3,
          content:
            "麦尔鼓手节8小接Solo简介，麦尔鼓手节8小Solo简介，麦尔鼓手节80小接Solo麦…",
          praiseNum: 4
        },
        {
          id: 3,
          userName: "呆萌小龟",
          time: "5小时以前",
          num: 0,
          content:
            "麦尔鼓手节8小接Solo简介，麦尔鼓手节8小Solo简介，麦尔鼓手节80小接Solo麦…",
          praiseNum: 4
        }
      ], //评论数据
      status: null, //判断是从哪过来的
      songSheetId: null, //歌单id
      topData: {}, //顶部歌单 歌曲 信息
      list_category_id: null, //排行榜id
      isPublish: true, //判断当前是发布评论  还是回复评论
      replyContent: "", //回复占位文本内容
      descReply: "", //回复评论的内容
      replyCommentId: null, //被回复评论的id
      isShowReply: false, //是否展示回复模态框
      musicListId: null //专辑id
    };
  },
  components: {},
  directives: {
    focus: {
      inserted: function(el, { value }) {
        if (value) {
          el.focus();
        }
      }
    }
  },
  methods: {
    // 获取歌单评论信息
    getSongSheetData() {
      const url =
        this.$host1 +
        `home/commentSongSheetList?song_sheet_id=` +
        this.songSheetId;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data.data, "---res.data.data--");
          if (res.data.code == 200) {
            this.commentList = res.data.data.list;
            this.topData = res.data.data.title;
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取排行榜评论信息
    getRankComment() {
      const url =
        this.$host1 +
        `home/commentListList?list_category_id=` +
        this.list_category_id;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data.data,'---res.data.data--');
          if (res.data.code == 200) {
            this.commentList = res.data.data.list;
            this.topData = res.data.data.top;
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取专辑评论列表信息
    getAlbumComment() {
      const url =
        this.$host1 +
        `home/commentMusicListList?music_list_id=` +
        this.musicListId;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data, "---res.data--专辑");
          if (res.data.code == 200) {
            this.commentList = res.data.data.list;
            this.topData = res.data.data.title;
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取单曲评论列表信息
    getSingleSong() {
      const url =
        this.$host1 + `home/musicCommentsList?music_id=` + this.musicListId;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data, "---res.data--单曲评论列表信息");
          if (res.data.code == 200) {
            this.commentList = res.data.data.list;
            this.topData = res.data.data.top;
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 发送评论信息
    sendComment() {
      console.log(this.desc, "---this.desc");
      console.log(this.status, "---this.status");
      if (this.status == 1) {
        // 表示当前评论的是歌单
        this.commentSongSheet();
      } else if (this.status == 2) {
        // 表示当前评论的是专辑
        this.commentAlbum();
      } else if (this.status == 3) {
        // 表示当前评论的是排行榜
        this.commentRank();
      } else if (this.status == 5) {
        // 表示当前评论的是单曲
        this.commentMusic();
      }
    },
    // 评论单曲
    commentMusic() {
      const url = this.$host1 + `home/commentMusic`;
      var params = {
        music_id: this.musicListId,
        comments_words: this.desc
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--评论单曲");
          if (res.data.code == 200) {
            this.desc = "";
            this.getSingleSong(); //重新获取下单曲评论信息
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 评论专辑
    commentAlbum() {
      const url = this.$host1 + `home/commentMusicList`;
      var params = {
        music_list_id: this.musicListId,
        comments_content: this.desc
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--评论专辑");
          if (res.data.code == 200) {
            this.desc = "";
            this.getAlbumComment(); //重新获取下专辑评论回复的数据
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 评论排行榜
    commentRank() {
      const url = this.$host1 + `home/commentList`;
      var params = {
        list_category_id: this.list_category_id,
        comments_contents: this.desc
      };
      this.$axios
        .post(url, params)
        .then(res => {
          // console.log(res.data,'---res.data--');
          if (res.data.code == 200) {
            this.desc = "";
            this.getRankComment();
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 评论歌单
    commentSongSheet() {
      const url = this.$host1 + `home/commentSongSheet`;
      var params = {
        song_sheet_id: this.songSheetId,
        comments_content: this.desc
      };
      this.$axios
        .post(url, params)
        .then(res => {
          // console.log(res.data,'---res.data--');
          if (res.data.code == 200) {
            this.desc = "";
            this.getSongSheetData();
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 点赞单曲列表
    supportSingleSong(id) {
      const url = this.$host1 + `home/thumbsUpMusicComments`;
      var params = {
        mix_id: id
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.getSingleSong(); //重新获取下单曲评论列表信息
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 点赞歌单评论列表
    supportSongSheet(id) {
      const url = this.$host1 + `home/thumbsUpSongSheetComments`;
      var params = {
        mix_id: id
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.getSongSheetData();
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 点赞排行榜评论
    supportRank(id) {
      const url = this.$host1 + `home/thumbsUpListComments`;
      var params = {
        mix_id: id
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.getRankComment();
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 点赞专辑评论
    supportAlbum(id) {
      const url = this.$host1 + `home/thumbsUpMusicListComments`;
      var params = {
        mix_id: id
      };
      this.$axios
        .post(url, params)
        .then(res => {
          // console.log(res.data,'---res.data--点赞专辑评论');
          if (res.data.code == 200) {
            this.getAlbumComment(); //重新获取下专辑评论的数据
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 点赞评论列表
    support(e, f, albumId, musicId) {
      if (this.status == 1) {
        // 表示当前点击的是歌单评论列表里面的数据
        var mix_id = e;
        this.supportSongSheet(mix_id);
      } else if (this.status == 2) {
        // 表示当前点击的是专辑评论
        var mix_id = albumId;
        this.supportAlbum(mix_id);
      } else if (this.status == 3) {
        // 表示当前点击的是排行榜评论列表里面的数据
        var mix_id = f;
        this.supportRank(mix_id);
      } else if (this.status == 5) {
        // 表示当前点击的是单曲评论列表里面的数据
        var mix_id = musicId;
        this.supportSingleSong(mix_id);
      }
    },
    // 关闭模态框
    closeModel() {
      this.isPublish = true;
      this.isShowReply = false;
    },
    // 点击了回复评论
    replyComment() {
      this.isShowReply = false;
      this.isPublish = false;
      this.picFocusStatus = true;
    },
    // 查看评论回复
    toCommentReply(e, f, albumId,songId) {
      if (this.status == 1) {
        // 表示当前是要查看歌单的评论数据
        this.$router.push({
          path: "/index/comment-reply",
          query: { status: this.status, id: e }
        });
      } else if (this.status == 2) {
        // 表示当前是要查看专辑评论的回复
        this.$router.push({
          path: "/index/comment-reply",
          query: { status: this.status, id: albumId }
        });
      } else if (this.status == 3) {
        // 表示当前是要查看排行榜数据
        this.$router.push({
          path: "/index/comment-reply",
          query: { status: this.status, id: f }
        });
      }else if (this.status == 5) {
        // 表示当前是要查看单曲id
        this.$router.push({
          path: "/index/comment-reply",
          query: { status: this.status, id: songId }
        });
      }
    },
    // 回复评论框失去焦点且文本框内没有内容或者已经回复结束
    stopReply() {
      if (this.descReply == "") {
        this.isPublish = true;
      }
    },
    // 显示回复评论模态框
    showReplyModel(item) {
      console.log(item, "---item");
      if (this.status == 1) {
        // 回复歌单
        this.replyCommentId = item.song_sheet_comments_id;
      } else if (this.status == 2) {
        // 回复专辑评论
        this.replyCommentId = item.music_list_comments_id;
      } else if (this.status == 3) {
        // 回复排行榜
        this.replyCommentId = item.list_comments_id;
      } else if (this.status == 5) {
        // 回复单曲
        this.replyCommentId = item.music_comments_id;
      }
      this.replyContent = "回复" + item.nickname;
      this.isShowReply = true;
    },
    // 发送回复评论
    sendReplyComment() {
      console.log(this.desc, "---this.desc");
      console.log(this.status, "---this.status");
      if (this.status == 1) {
        // 表示当前评论的是歌单
        this.commentSongSheetReply();
      } else if (this.status == 2) {
        // 表示当前回复的是专辑的评论
        this.commentAlbumReply();
      } else if (this.status == 3) {
        // 表示当前评论的是排行榜
        this.commentRankReply();
      } else if (this.status == 5) {
        // 表示当前评论的是单曲
        this.commentSingleSongReply();
      }
    },
    // 回复---专辑评论
    commentAlbumReply() {
      const url = this.$host1 + `home/replyCommentMusicList`;
      var params = {
        music_list_comments_id: this.replyCommentId,
        reply_words: this.descReply
      };
      this.$axios
        .post(url, params)
        .then(res => {
          // console.log(res.data,'---res.data--回复专辑');
          if (res.data.code == 200) {
            this.descReply = "";
            this.getAlbumComment(); //重新获取下专辑评论数据
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 回复---歌单评论
    commentSongSheetReply() {
      const url = this.$host1 + `home/replyCommentSongSheet`;
      var params = {
        song_sheet_comments_id: this.replyCommentId,
        reply_words: this.descReply
      };
      this.$axios
        .post(url, params)
        .then(res => {
          // console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.descReply = "";
            this.getSongSheetData();
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 回复-----单曲评论
    commentSingleSongReply() {
      const url = this.$host1 + `home/replyMusicComments`;
      var params = {
        music_comments_id: this.replyCommentId,
        reply_words: this.descReply
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.descReply = "";
            this.getSingleSong(); //重新获取下单曲评论列表信息
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 回复----排行榜评论
    commentRankReply() {
      const url = this.$host1 + `home/replyListComments`;
      var params = {
        list_comments_id: this.replyCommentId,
        reply_words: this.descReply
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.descReply = "";
            this.getRankComment();
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    }
  },
  created() {
    // 歌单  1   歌曲 2     排行榜  3
    this.status = this.$route.query.status;
    if (this.status == 1) {
      // 表示当前是从歌单来的
      this.songSheetId = this.$route.query.id;
      this.getSongSheetData();
    } else if (this.status == 3) {
      // 表示当前是从排行榜过来的
      this.list_category_id = this.$route.query.id;
      this.getRankComment();
    } else if (this.status == 2) {
      // 表示是从专辑过来的
      this.musicListId = this.$route.query.id;
      this.getAlbumComment(); //获取专辑评论数据
    } else if (this.status == 5) {
      // 表示是从单曲过来的
      this.musicListId = this.$route.query.id;
      this.getSingleSong(); //获取单曲评论数据
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container {
  padding-top: 1rem;
  box-sizing: border-box;
  .top-card {
    margin-bottom: 0.24rem;
    .items {
      display: flex;
      padding: 0.15rem 0.25rem;
      box-sizing: border-box;
      background-color: #fff;
      .left {
        margin-right: 0.35rem;
        .img {
          width: 1.2rem;
          height: 1.2rem;
          border-radius: 0.12rem;
          overflow: hidden;
          img {
            width: 100%;
          }
        }
      }
      .right {
        margin-top: 0.21rem;
        .top {
          width: 4.76rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-weight: 500;
          color: rgba(68, 68, 68, 1);
          margin-bottom: 0.21rem;
        }
        .bottom {
          font-weight: 400;
          color: #999999;
        }
      }
    }
  }

  //精彩评论部分的样式
  .comment {
    background-color: #fff;
    padding: 0.21rem 0 0.3rem;
    box-sizing: border-box;
    .comment-title {
      font-weight: bold;
      color: rgba(68, 68, 68, 1);
      margin-bottom: 0.33rem;
      padding: 0 0.24rem;
      padding-bottom: 0.3rem;
      box-sizing: border-box;
      border-bottom: 0.01rem solid #e9e9e9;
    }
    .comment-list {
      padding: 0 0.24rem;
      box-sizing: border-box;
      .items {
        display: flex;
        padding-bottom: 0.33rem;
        box-sizing: border-box;
        .left {
          margin-right: 0.2rem;
          img {
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 50%;
          }
        }
        .right {
          width: 100%;
          .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.27rem;
            .t-left {
              .user-name {
                font-weight: 500;
                color: rgba(102, 102, 102, 1);
                line-height: 0.32rem;
              }
              .timer {
                font-size: 0.22rem;
                font-weight: 400;
                color: rgba(153, 153, 153, 1);
                line-height: 0.32rem;
              }
            }
            .t-right {
              display: flex;
              .num {
                margin-right: 0.2rem;
                font-weight: 400;
                color: rgba(102, 102, 102, 1);
              }
              .praise {
                width: 0.24rem;
                height: 0.26rem;
                img {
                  width: 100%;
                }
              }
            }
          }
          .centers {
            text-align: left;
            font-weight: 500;
            color: rgba(68, 68, 68, 1);
            line-height: 0.48rem;
          }
          .bottom {
            margin-top: 0.31rem;
            font-weight: 500;
            color: rgba(56, 117, 209, 1);
            line-height: 0.32;
          }
          .bottom::after {
            content: ">";
            font-size: 0.28rem;
            margin-left: 0.1rem;
            color: rgba(56, 117, 209, 1);
          }
        }
      }
    }

    .mes {
      color: #999999;
    }
  }

  // 发表评论部分
  .send-comment {
    width: 100%;
    height: 0.89rem;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.24rem;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    bottom: 0;
    input {
      width: 85%;
      height: 100%;
    }
    input::-webkit-input-placeholder {
      font-size: 0.28rem;
      color: #999999;
    }
    .send-btn {
      font-weight: bold;
      color: rgba(84, 4, 121, 1);
    }
  }
  // 回复评论模态框样式
  .comment-model {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
    .content {
      width: 90%;
      border-radius: 0.2rem;
      padding: 0.14rem 0.24rem;
      box-sizing: border-box;
      height: 1rem;
      position: absolute;
      left: 50%;
      top: 40%;
      transform: translate(-50%);
      background-color: #fff;
      .reply-comment {
        margin-top: 0.2rem;
      }
    }
  }
}
</style>
